import Vue from 'vue'
import VueRouter from "vue-router";
Vue.use(VueRouter)

import layout from '../views/layout.vue'
import articleDetail from '../views/article-detail.vue'
import article from '../views/article.vue'
import collect from '../views/collect.vue'
import like from '../views/like.vue'
import user from '../views/user.vue'

const router = new VueRouter({
  routes: [
    // 一.配置一级路由 layout articleDetail
        // 1.先导入文件
        // 2.在routes 中配置路径
    // 二.配置二级路由 layout articleDetail
        // 1.先导入文件
        // 2.在一级路由 layout 中的 children 属性中配置路径
        // 3.使用 <router-view></router-view> 给子路由占位
    // 三.渲染列表
        // 1.跳转到 article 使用 created 钩子 发 axios 请求 渲染页面
        // 2.给每一项盒子添加点击事件 跳转页面时 携带 id 用于发请求
    // 四.渲染 detail 页面
        // 1.使用 $route.params .id 获取到 查询参数
        // 2.发送 axios 请求 渲染页面
        // 3.给后退按钮 绑定 $router.back() 事件 
    {
      path:'/',
      redirect:'article'
    },
    {
      path:'/',
      component:layout,
      children:[
        {
          path:'/article',
          component:article,
        },
        {
          path:'/collect',
          component:collect,
        },
        {
          path:'/like',
          component:like,
        },
        {
          path:'/user',
          component:user,
        },
      ]
    },
    {
      path:'/detail/:id',
      component:articleDetail
    }
  ]
})

export default router